<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<link rel="stylesheet" href="../stylesheets/bootstrap.min.css">
	<link rel="stylesheet" href="../stylesheets/bootstrap-responsive.css">
	<link rel="stylesheet" type="text/css" href="../stylesheets/main.css" />
</head>
<body>
<div class='container'>
	<h2 class="sports">Leaderboards</h2>
	<a href="/Admin/Leader">Add to Leader Board</a>
	<div class='row'>
		<div class="col-md-6" class="leader-board" style="border:black;">
			<h2 style="color:#056B3A;">Men's Leaderboard</h2>
				<div class="table-responsive leader-table">
					<table class="table">
						<thead>
						<tr>
							<td>Place</td>
							<td>Name</td>
							<td>Score</td>
						</tr>
						</thead>
			  			<tbody id='men-leader-table-body'></tbody>
					</table>
				</div>
		</div>
		<div class="col-md-6" class="leader-board" style="border:black;">
			<h2 style="color:#056B3A;">Women's Leaderboard</h2>
			<div class="table-responsive leader-table">
				<table class="table">
					<thead>
					<tr>
						<td>Place</td>
						<td>Name</td>
						<td>Score</td>
					</tr>
					</thead>
		  			<tbody id='women-leader-table-body'></tbody>
				</table>		
			</div>
		</div>
	</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
	$.ajax({
		   type: 'GET',
		   url: '/GetMenLeaderBoard',
		   dataType : 'json',
		   success : function(resp) 
		             {
			   			leaderboardRow = '';
			   			$.each(resp, function() {
			   				leaderboardRow += '<tr><td>'+this.position+'.</td><td>'+this.name+'</td><td>'+this.score+'</td></tr>';
			   		    });
			   			
			   			$('#men-leader-table-body').html(leaderboardRow);
		             }
		   });
			$.ajax({
				   type: 'GET',
				   url: '/GetWomenLeaderBoard',
				   dataType : 'json',
				   success : function(resp) 
				             {
					   			leaderboardRow = '';
					   			$.each(resp, function() {
					   				leaderboardRow += '<tr><td>'+this.position+'.</td><td>'+this.name+'</td><td>'+this.score+'</td></tr>';
					   		    });
					   			
					   			$('#women-leader-table-body').html(leaderboardRow);
				             }
			});
});
</script>
</body>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/main.js"></script>
</html>